<template>
  <div style="margin-top: 10px">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--    全部-->
      <el-tab-pane label="全部订单" name="all">
        <!--        地址-->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="expand" @click="getAddress()">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="联系人：">
                  <span>{{ addressData[scope.$index].recreceiver }}</span>
                </el-form-item>
                <el-form-item label="联系地址：">
                  <span>{{ addressData[scope.$index].readdress }}</span>
                </el-form-item>
                <el-form-item label="联系电话：">
                  <span>{{ addressData[scope.$index].rephone }}</span>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <span>{{ tableData[scope.$index].ordertime }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" prop="onum"></el-table-column>
          <el-table-column label="商品" width="300">
            <template slot-scope="scope">
              <div style="display: flex">
                <div style="flex: 2">
                  <el-image :src="shoesData[scope.$index].simage" style="width: 100px; height: 100px;"
                            fit="contain"></el-image>
                </div>
                <div style="flex: 2">{{ shoesData[scope.$index].sname }}</div>
                <!--                <div style="flex: 1; line-height: 100px; text-align: center">X {{ item.count }}</div>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="总价格">
            <template slot-scope="scope">
              <span style="color: red">￥ {{ scope.row.ototal }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="ostate">
            <template slot-scope="scope">
              <span>{{ state[scope.$index] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-popconfirm
                  v-if="tableData[scope.$index].ostate === 0"
                  @confirm="confirm(tableData[scope.$index].oid,scope.$index)"
                  title="确定已经收到货物？"
              >
                <el-button type="primary"
                           slot="reference">确认收货
                </el-button>
              </el-popconfirm>

              <el-popconfirm
                  v-if="tableData[scope.$index].ostate === 1"
                  @confirm="del(tableData[scope.$index].oid)"
                  title="确定删除？"
              >
                <el-button type="danger" icon="el-icon-delete" circle slot="reference"
                           style="margin-left: 10px"></el-button>
              </el-popconfirm>

              <el-button v-if="tableData[scope.$index].ostate === 100" type="primary" @click="GoComment">
                评价
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[2, 5, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>


      <!--      已完成-->
      <el-tab-pane label="已完成" name="已完成">
        <!--        地址-->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="expand" @click="getAddress()">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="联系人：">
                  <span>{{ addressData[scope.$index].recreceiver }}</span>
                </el-form-item>
                <el-form-item label="联系地址：">
                  <span>{{ addressData[scope.$index].readdress }}</span>
                </el-form-item>
                <el-form-item label="联系电话：">
                  <span>{{ addressData[scope.$index].rephone }}</span>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <span>{{ tableData[scope.$index].ordertime }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" prop="onum"></el-table-column>
          <el-table-column label="商品" width="300">
            <template slot-scope="scope">
              <div style="display: flex">
                <div style="flex: 2">
                  <el-image :src="shoesData[scope.$index].simage" style="width: 100px; height: 100px;"
                            fit="contain"></el-image>
                </div>
                <div style="flex: 2">{{ shoesData[scope.$index].sname }}</div>
                <!--                <div style="flex: 1; line-height: 100px; text-align: center">X {{ item.count }}</div>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="总价格">
            <template slot-scope="scope">
              <span style="color: red">￥ {{ scope.row.ototal }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="ostate">
            <template slot-scope="scope">
              <span>{{ state[scope.$index] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-popconfirm
                  v-if="tableData[scope.$index].ostate === 0"
                  @confirm="confirm(tableData[scope.$index].oid,scope.$index)"
                  title="确定已经收到货物？"
              >
                <el-button type="primary"
                           slot="reference">确认收货
                </el-button>
              </el-popconfirm>
              <el-popconfirm
                  v-if="tableData[scope.$index].ostate === 1"
                  @confirm="del(tableData[scope.$index].oid)"
                  title="确定删除？"
              >
                <el-button type="danger" icon="el-icon-delete" circle slot="reference"
                           style="margin-left: 10px"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[2, 5, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>


      <!--    待收货-->
      <el-tab-pane label="待收货" name="待收货">
        <!--        地址-->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="expand" @click="getAddress()">
            <template slot-scope="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="联系人：">
                  <span>{{ addressData[scope.$index].recreceiver }}</span>
                </el-form-item>
                <el-form-item label="联系地址：">
                  <span>{{ addressData[scope.$index].readdress }}</span>
                </el-form-item>
                <el-form-item label="联系电话：">
                  <span>{{ addressData[scope.$index].rephone }}</span>
                </el-form-item>
                <el-form-item label="创建时间：">
                  <span>{{ tableData[scope.$index].ordertime }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" prop="onum"></el-table-column>
          <el-table-column label="商品" width="300">
            <template slot-scope="scope">
              <div style="display: flex">
                <div style="flex: 2">
                  <el-image :src="shoesData[scope.$index].simage" style="width: 100px; height: 100px;"
                            fit="contain"></el-image>
                </div>
                <div style="flex: 2">{{ shoesData[scope.$index].sname }}</div>
                <!--                <div style="flex: 1; line-height: 100px; text-align: center">X {{ item.count }}</div>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="总价格">
            <template slot-scope="scope">
              <span style="color: red">￥ {{ scope.row.ototal }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="ostate">
            <template slot-scope="scope">
              <span>{{ state[scope.$index] }}</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-popconfirm
                  v-if="tableData[scope.$index].ostate === 0"
                  @confirm="confirm(tableData[scope.$index].oid,scope.$index)"
                  title="确定已经收到货物？"
              >
                <el-button type="primary"
                           slot="reference">确认收货
                </el-button>
              </el-popconfirm>
              <el-popconfirm
                  v-if="tableData[scope.$index].ostate === 1"
                  @confirm="del(tableData[scope.$index].oid)"
                  title="确定删除？"
              >
                <el-button type="danger" icon="el-icon-delete" circle slot="reference"
                           style="margin-left: 10px"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[2, 5, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>


      <!--      待评价-->
      <el-tab-pane label="待评价" name="待评价">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column label="订单编号" prop="onum">
          </el-table-column>
          <el-table-column label="商品图片" width="300">
            <template slot-scope="scope">
              <el-image :src="shoesData[scope.$index].simage" style="width: 100px; height: 100px;"
                        fit="contain"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <span>{{ shoesData[scope.$index].sname }}</span>
            </template>
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="preComment(scope.$index)">评价</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[2, 5, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane><!--      待评价-->
      <el-tab-pane label="已评价" name="已评价">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column label="订单编号" prop="onum">
          </el-table-column>
          <el-table-column label="商品图片" width="300">
            <template slot-scope="scope">
              <el-image :src="shoesData[scope.$index].simage" style="width: 100px; height: 100px;"
                        fit="contain"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <span>{{ shoesData[scope.$index].sname }}</span>
            </template>
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button v-if="tableData[scope.$index].ostate === 1" type="warning"
                         @click="$router.push('/front/comments')">
                已评价,点击查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[2, 5, 10]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>


    <!-- 弹窗   -->
    <el-dialog title="评价信息" :visible.sync="dialogFormVisible" width="30%"
               :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form :model="entity">
        <el-form-item label="评价" label-width="120px">
          <el-input type="textarea" v-model="entity.sccomments" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="评分" label-width="120px">
          <el-rate
              v-model="entity.scscore"
              show-score
              :colors="colors">
          </el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comment">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>


export default {
  name: "cart",
  data() {
    return {
      user: {},
      rids: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      activeName: 'all',
      tableData: [],
      addressData: [],
      shoesData: [],
      payData: [],
      commentData: [],
      entity: {},
      state: [],
      tablename: "all",
      dialogFormVisible: false,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      sindex: 0,
    }
  },
  created() {
    this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    this.load()
  },
  methods: {
    load() {
      if (!this.user.uid) {
        this.$message({
          type: 'warning',
          message: '请登录！'
        })
        return
      }
      this.commentData = []
      if (this.tablename === "all") {
        axios.get("/orders/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ostate: 10,
            ouid: this.user.uid
          }
        }).then(res => {
          //console.log(res.data.data.records)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          // axios.get("receives/findid?recids=" + res.data.data.records.orecid).then(res2 => {
          //   this.addressData = res2.data.data
          //   console.log("this.addressData============", this.addressData)
          // })
          this.getAddress()
          this.getShoes()
          this.getState()
          // console.log(this.tableData)
          // console.log(this.addressData)
          // console.log(this.rids)
          // console.log(this.state)
        })
      } else if (this.tablename === '待收货') {
        axios.get("/orders/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ostate: 0,
            ouid: this.user.uid
          }
        }).then(res => {
          //console.log(res.data.data.records)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          // axios.get("receives/findid?recids=" + res.data.data.records.orecid).then(res2 => {
          //   this.addressData = res2.data.data
          //   console.log("this.addressData============", this.addressData)
          // })
          this.getAddress()
          this.getShoes()
          this.getState()
          // console.log(this.tableData)
          // console.log(this.addressData)
          // console.log(this.rids)
          // console.log(this.state)
        })
      } else if (this.tablename === '待评价') {
        axios.get("/orders/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ostate: 100,
            ouid: this.user.uid
          }
        }).then(res => {
          //console.log(res.data.data.records)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          // axios.get("receives/findid?recids=" + res.data.data.records.orecid).then(res2 => {
          //   this.addressData = res2.data.data
          //   console.log("this.addressData============", this.addressData)
          // })
          this.getAddress()
          this.getShoes()
          this.getState()
          // console.log(this.tableData)
          // console.log(this.addressData)
          // console.log(this.rids)
          // console.log(this.state)
        })
      } else if (this.tablename === '已完成' || this.tablename === "已评价") {
        axios.get("/orders/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ostate: 1,
            ouid: this.user.uid
          }
        }).then(res => {
          //console.log(res.data.data.records)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          // axios.get("receives/findid?recids=" + res.data.data.records.orecid).then(res2 => {
          //   this.addressData = res2.data.data
          //   console.log("this.addressData============", this.addressData)
          // })
          this.getAddress()
          this.getShoes()
          this.getState()
          // console.log(this.tableData)
          // console.log(this.addressData)
          // console.log(this.rids)
          // console.log(this.state)
        })
      }

    },
    getState() {
      this.tableData.forEach((item, index) => {
        if (this.tableData[index].ostate === 1) {
          this.state.push("已完成")
        } else if (this.tableData[index].ostate === 0) {
          this.state.push("待发货")
        }
      })
    },
    getAddress() {
      this.tableData.forEach((item, index) => {
        axios.post("/orders/getAddress?oid=" + item.oid).then(res => {
          this.addressData.push(res.data.data)
        })
      })
      // console.log(this.tableData)
      // console.log(this.rids)
    },
    getShoes() {
      console.log("this.tableData==============================", this.tableData)
      this.tableData.forEach((item, index) => {
        axios.post("/orders/getShoes?oid=" + item.oid).then(res => {
          console.log(item.oid)
          this.shoesData.push(res.data.data)
        })
      })
      console.log("this.shoesData==============================", this.shoesData)
    },
    preComment(index) {
      this.entity = {}
      console.log("index===", index)
      this.sindex = index
      this.dialogFormVisible = true
    },

    comment() {
      if (!this.entity.sccomments) {
        this.$message({
          type: 'warning',
          message: '请填写内容'
        })
        return
      }
      this.entity.cuid = this.user.uid
      this.entity.csid = this.shoesData[this.sindex].sid
      axios.post("/comment/save", this.entity).then(res => {
        if (res.data.code === 200) {
          axios.post("/orders/confirm?oid=" + this.tableData[this.sindex].oid + "&ostate=" + 1).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '评价成功'
              })
            }
          })
          this.dialogFormVisible = false
          this.load()
        }
      })
    },
    confirm(id, index) {
      console.log(id)
      this.state[index] = "已完成"
      axios.post("/orders/confirm?oid=" + id + "&ostate=" + 100).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '已确认收货'
          })
          this.load()
        }
      })
    },
    handleClick(tab, event) {
      console.log(tab.name)
      this.tablename = tab.name
      this.load()
    },
    GoComment() {
      this.$message.warning("请去待评价评论")
    }
    ,
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    }
    ,
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    }
    ,
    del(oid) {
      axios.post("/orders/delete?id=" + oid).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.load()
        }
      })
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
